import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import { ITabe } from './type/index'

 
export interface State {
  count: number,
  collapse: boolean,
  tabsList: Array<ITabe> // 数组泛型  1.let list: number[] = [1, 2, 3]; 2.let list: Array<number> = [1, 2, 3];
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0,
    collapse: false,
    tabsList: []
  },
  mutations: {
    // 这个State是上面自定义的接口（第5行）
    // 这个count111是HelloWorld组件传进来的值
    setCount(state: State, count111: number) {
      state.count = count111
    },
    // 设置collapse
    setCollapse: (state: State, collapse: boolean) => {
      state.collapse = collapse
    },
    addTabe: (state: State, tab: ITabe) => {
      // 判断是否已经存在,如果不存在,才放入
      if(state.tabsList.some(item => item.path === tab.path)) return
      state.tabsList.push(tab)
    }
  },
  getters: {
    getCount(state: State) {
      return state.count
    },
    // 获取collapse
    getCollapse: (state: State) => {
      return state.collapse
    },
    // 获取tabs
    getTabs: (state: State) => {
      return state.tabsList
    }
  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}